<template>
  <ga-modal
    v-model:visible="visible"
    title-align="start"
    :width="680"
    @close="handleCancel(formRef)"
    modal-class="modal_style"
  >
    <template #title>标签管理</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form ref="formRef">
        <ga-card :style="{ backgroundColor: '#F7F9FC' }" title="标签" :bordered="false">
          <template #extra>
            <ga-link :hoverable="false" @click="tableData.push({})">
              <template #icon><icon-plus /></template>添加
            </ga-link>
          </template>
          <ga-table
            row-key="id"
            :columns="columns"
            :data="tableData"
            :bordered="false"
            size="medium"
            :hoverable="false"
            :pagination="false"
            :scroll="{ y: 220 }"
          >
            <template #dictType="{ record, rowIndex }">
              <ga-select
                size="small"
                allow-create
                v-model="record.dictType"
                @change="handleChangePlatform(record, rowIndex)"
                placeholder="请选择键(支持创建)"
              >
                <ga-option
                  v-for="item in platformTreeList"
                  :key="item.value"
                  :value="item.tableId"
                >
                  {{ item.name }}
                </ga-option>
              </ga-select>
            </template>
            <template #dictValue="{ record }">
              <ga-select
                placeholder="请选择值(支持创建)"
                size="small"
                v-model="record.dictValue"
              >
                <ga-option
                  allow-create
                  multiple
                  v-for="item in platformTreeList"
                  :key="item.value"
                  :value="item.clusterUuid"
                >
                  {{ item.name }}
                </ga-option>
              </ga-select>
            </template>
            <template #action="{ rowIndex }">
              <ga-link
                status="danger"
                :hoverable="false"
                @click="() => tableData.splice(rowIndex, 1)"
              >
                移除
              </ga-link>
            </template>
          </ga-table>
        </ga-card>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk">确定</ga-button>
    </template>
  </ga-modal>
</template>

<script setup>
import { ref, defineEmits, reactive } from "vue";
import { updataTagList, getTagList } from "@/api/cluserMgmt";
import { Message } from "@garco-design/web-vue";
import useLoading from "@/hooks/loading";

const platformTreeList = ref([]);
const tableData = ref([]);
const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const formData = reactive({
  tags: [],
});
const columns = [
  {
    title: "键",
    slotName: "dictType",
    dataIndex: "dictType",
  },
  {
    title: "值",
    slotName: "dictValue",
    dataIndex: "dictValue",
    width: 300,
  },
  {
    title: "操作",
    slotName: "action",
    width: 80,
  },
];
const visible = ref(false);
const curId = ref("");
const resolveOption = (data) => {
  return data?.filter(
    (item) =>
      !tableData.value.some((c) => c.networkSubnetUuid?.includes(item.networkUuid))
  );
};
const open = async (val) => {
  visible.value = true;
  setLoading(true);
  const { data } = await getTagList(val?.id);
  formData.tags = data;
  curId.value = val?.id;
  setLoading(false);
};
// 保存
const emits = defineEmits(["fetchData"]);
// 判断函数
const checkAllItemsNotEmpty = (data) => {
  for (const item of data) {
    if (!item.dictValue) return false;
    if (!item.dictType) return false;
  }
  return true;
};
const handleOk = async () => {
  // const res = await formRef.value?.validate();
  if (tableData.value?.length > 0 && checkAllItemsNotEmpty(tableData.value)) {
    try {
      // console.log("tableData.value", tableData.value);
      // const arr = tableData.value?.map((item) => {
      //   return {
      //     [item.dictValue]:item.dictType
      //   };
      // });
      const { code } = await updataTagList(curId.value, formData.tags);
      if (code === 20000) Message.success("操作成功");
      emits("fetchData");
    } finally {
      visible.value = false;
    }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.ratio_label {
  border-left: 4px solid #0f5ef7;
  padding-left: 8px;
}
</style>
